<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="退货单编号">
              <a-input placeholder="请输入退货单编号" v-model="queryParam.id"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="经销商名称">
              <a-input placeholder="请输入经销商名称" v-model="queryParam.storeName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="下单时间">
              <a-range-picker format="YYYY-MM-DD HH:mm:ss"
                              :style="{width: '277px'}"
                              :show-time="{
                                hideDisabledOptions: true,
                                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                              }"
                              :placeholder="['开始时间', '结束时间']"
                              @change="onCreateTimeChange"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="5" :sm="6">
            <a-form-item
              label="渠道">
              <a-select
                v-decorator="[ 'channelId', {}]"
                v-model="queryParam.channelId"
                style="width: 100%"
                :getPopupContainer="node => node.parentNode"
                placeholder="请选择渠道">
                <a-select-option v-for="(channel,channelIdIndex) in ChannelList" :key="channel.id.toString()"
                                 :value="channel.id">
                  {{ channel.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="4" :sm="24" style="padding-left:20px;">
            <a-form-item label="订单状态">
              <j-multi-select-tag :options="returnOrderStatus" v-model="status_MultiString" placeholder="请选择订单状态"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden; padding-left: 10px;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>

            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('申请退换货')">导出</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :scroll="{ x: 1325 }"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
           <a @click="handleShowDetail(record)">查看</a>
          <a v-has="'returnOrder:update'" :hidden="[3].indexOf(record.status) === -1" style="padding-left: 10px;"
             @click="handleUpdateDetail(record)">修改</a>
          <a :hidden="[3].indexOf(record.status) === -1" v-has="'returnOrder:logisticsApprove'"
             style="padding-left: 10px;"
             @click="logisticsApprove(record)">物流审核</a>
          <a :hidden="[6].indexOf(record.status) === -1" v-has="'returnOrder:inspectionApprove'"
             style="padding-left: 10px;"
             @click="inspectionApprove(record)">品检部审核</a>
          <a :hidden="[7].indexOf(record.status) === -1" v-has="'returnOrder:orderManagerApprove'"
             style="padding-left: 10px;"
             @click="orderManagerApprove(record)">跟单员审核</a>
            <a :hidden="[8].indexOf(record.status) === -1" v-has="'returnOrder:financeApprove'"
               style="padding-left: 10px;"
               @click="financeApprove(record)">财务审核</a>
            <a style="padding-left: 10px;" @click="handleTrace(record)">轨迹</a>
           <a style="padding-left: 10px;" @click="handlePrint(record)">打印退货单</a>
           <a style="padding-left: 10px;" v-has="'returnOrder:returnPreApprove'" v-if="record.status==7" @click="handleBack(record,6)">退回品检部审核</a>
           <a style="padding-left: 10px;" v-has="'returnOrder:returnPreApprove'" v-if="record.status==6" @click="handleBack(record,3)">退回物流审核</a>
           <a style="padding-left: 10px;" v-has="'returnOrder:editCertificate'"  @click="handleImageEdit(record)">更新申请凭证</a>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <omsOrderReturnApply-modal ref="modalForm" @ok="modalFormOk"></omsOrderReturnApply-modal>
    <orderReturnApplyApproveModal ref="OrderReturnApplyApproveModal" @ok="modalFormOk"></orderReturnApplyApproveModal>
    <returnOrderViewModal ref="ReturnOrderViewModal" @ok="modalFormOk"/>
    <orderReturnApplyInspectionApprove ref="OrderReturnApplyInspectionApprove" @ok="modalFormOk"/>
    <orderReturnApplyLogisticsApprove ref="OrderReturnApplyLogisticsApprove" @ok="modalFormOk"/>
    <omsReturnOrderTraceModalJX ref="OmsReturnOrderTraceModalJX" @ok="modalFormOk"/>
    <returnApplyFinanceApproveModal ref="ReturnApplyFinanceApproveModal" @ok="modalFormOk"/>
    <updateOrderReturnApply ref="UpdateOrderReturnApply" @ok="modalFormOk"/>
    <returnOrderImageEditModal ref="ReturnOrderImageEditModal" @ok="modalFormOk"/>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import OmsOrderReturnApplyModal from './modules/OmsOrderReturnApplyModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import OrderReturnApplyApproveModal from './modules/OrderReturnApplyApproveModal'
import ReturnOrderViewModal from '@/views/oms/modules/ReturnOrderViewModal'
import moment from 'moment'
import {getAction, postAction} from "@api/manage"
import JMultiSelectTag from '../../components/dict/JMultiSelectTag'
import OrderReturnApplyLogisticsApprove from './modules/OrderReturnApplyLogisticsApprove'
import OrderReturnApplyInspectionApprove from './modules/OrderReturnApplyInspectionApprove'
import OmsReturnOrderTraceModalJX from './modules/OmsReturnOrderTraceModalJX'
import ReturnApplyFinanceApproveModal from './modules/ReturnApplyFinanceApproveModal'
import UpdateOrderReturnApply from './modules/UpdateOrderReturnApply'
import ReturnOrderImageEditModal from '../oms/modules/ReturnOrderImageEditModal'


export default {
  name: "OmsOrderReturnApplyList",
  mixins: [JeecgListMixin],
  components: {
    JMultiSelectTag,
    OmsOrderReturnApplyModal,
    OrderReturnApplyApproveModal,
    OrderReturnApplyLogisticsApprove,
    OrderReturnApplyInspectionApprove,
    ReturnOrderViewModal,
    OmsReturnOrderTraceModalJX,
    ReturnApplyFinanceApproveModal,
    UpdateOrderReturnApply,
    ReturnOrderImageEditModal
  },
  data() {
    return {
      description: '申请退换货管理页面',
      ChannelList: [],
      status_MultiString: '',
      returnOrderPrintUrl: '',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '退货单编号',
          align: "center",
          width: 150,
          dataIndex: 'id'
        },
        {
          title: '经销商',
          align: "center",
          width: 200,
          dataIndex: 'storeName'
        },
        {
          title: '渠道',
          align: "center",
          width: 200,
          dataIndex: 'channelName'
        },
        {
          title: '退货类型',
          align: "center",
          width: 100,
          dataIndex: 'returnType_dictText'
        },

        {
          title: '申请状态',
          align: "center",
          width: 100,
          dataIndex: 'status_dictText'
        },
        {
          title: '销售人员名称',
          align: "center",
          width: 110,
          dataIndex: 'saleUserName'
        },
        {
          title: '申请时间',
          align: "center",
          width: 150,
          dataIndex: 'createTime'
        },
        {
          title: '补发订单号',
          align: "center",
          width: 150,
          dataIndex: 'sendOrderId'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: 'right',
          scopedSlots: {customRender: 'action'},
        }
      ],
      returnOrderStatus: [
        {
          label: "代客户提交",
          value: "1"
        }, {
          label: "待销售审批",
          value: "2"
        }, {
          label: "待物流审批",
          value: "3"
        }, {
          label: "待跟单员审批",
          value: "7"
        },
        {
          label: "待品检部审批",
          value: "6"
        },
        {
          label: "待财务审批",
          value: "8"
        },
        {
          label: "审批拒绝",
          value: "4"
        },
        {
          label: "审批通过",
          value: "5"
        }],
      url: {
        list: "/returns/omsOrderReturnApply/list",
        delete: "/returns/omsOrderReturnApply/delete",
        deleteBatch: "/returns/omsOrderReturnApply/deleteBatch",
        exportXlsUrl: "returns/omsOrderReturnApply/exportXls",
        importExcelUrl: "returns/omsOrderReturnApply/importExcel",
        channelListUrl: 'stm/stmChannelInfo/list',
        ReturnOrderPrintUrl: "/returns/omsOrderReturnApply/getReturnOrderPrintUrl",
        returnPreApprove: "/returns/omsOrderReturnApply/returnPreApprove",
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  created() {

    this.queryParam.status_MultiString = '';
    this.getChannelList();
    this.getReturnOrderPrintUrl();
  },
  watch: {
    status_MultiString(v) {
      this.queryParam.status_MultiString = this.status_MultiString
    }
  },
  methods: {
    moment,
    onStatusChange: function (value) {
      console.log(value)
      this.queryParam.status_MultiString = value
    },
    logisticsApprove(record) {
      this.$refs.OrderReturnApplyLogisticsApprove.show(record);
    },
    inspectionApprove(record) {
      this.$refs.OrderReturnApplyInspectionApprove.show(record);
    },
    orderManagerApprove(record) {
      this.$refs.OrderReturnApplyApproveModal.show(record);
    },
    handleShowDetail(record) {
      this.$refs.ReturnOrderViewModal.show(record)
    },
    handleImageEdit(record) {
      this.$refs.ReturnOrderImageEditModal.show(record)
    },
    handleUpdateDetail(record) {
      this.$refs.UpdateOrderReturnApply.show(record)
    },
    onCreateTimeChange: function (value, dateString) {
      this.queryParam.createTime_begin = dateString[0]
      this.queryParam.createTime_end = dateString[1]
    },
    getChannelList() {
      let param = {};
      param.status = 1;
      param.pageSize = 100;
      getAction(this.url.channelListUrl, param).then(res => {
        if (res.success) {
          this.ChannelList = res.result.records;
          this.ChannelList.push({id: "", name: "请选择渠道"})
          this.ChannelList.reverse();
        } else {
          console.log(res.message)
        }
      })
    },
    handleTrace(record) {
      this.$refs.OmsReturnOrderTraceModalJX.show(record)
    },
    financeApprove(record) {
      this.$refs.ReturnApplyFinanceApproveModal.show(record);
    },
    handlePrint(record) {
      console.log(6666)
      let url = this.returnOrderPrintUrl + record.id
      open(url)
    },
    getReturnOrderPrintUrl() {
      let param = {};
      getAction(this.url.ReturnOrderPrintUrl, param).then(res => {
        if (res.success) {
          console.log(55555)
          this.returnOrderPrintUrl = res.message;
        } else {
          console.log(res.message)
        }
      })
    },
    handleBack(record, status) {
      let that = this
      postAction(this.url.returnPreApprove, {id: record.id, status: status}).then(res => {
        if (res.success) {
          that.searchQuery();
          that.$message.success(res.message);
        } else {
          that.$message.warning(res.message);
        }
      })
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>